<template>
  <div class="home-index">
    <home-header class="homeHeader" />
    <home-banner class="homeBanner" />

    <!-- <v-breadcrumb class="breadcrumb" /> -->
    <div class="home-container">
      <div class="content">
        <router-view v-slot="{ Component }">
          <transition name="move" mode="out-in">
            <keep-alive :include="tagsList">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>
<script setup>
import HomeHeader from '../components/Header.vue'
import HomeBanner from '../components/Banner.vue'
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const tagsList = computed(() => store.state.tagsList.map((item) => item.name))
const collapse = computed(() => store.state.collapse)
</script>

<style scoped lang="scss">
.content {
  overflow-y: auto;
}
</style>
